<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人报名</title>
    <script src="/static/login/js/vue.min.js"></script>
    <link rel="stylesheet" href="/static/login/css/element-ui.min.css">
    <script src="/static/login/js/element-ui.min.js"></script>
</head>
<style>
    #app {
        /*display: flex;*/
        /*justify-content: center;*/
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .plus {
        display: inline-block;
        font-size: 28px;
        color: #8c939d;
        font-style: normal;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .tips {
        width: 80%;
        background-color: rgb(221, 215, 215);
        border-radius: 10px;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        font-size: 20px;
        color: #409EFF;
    }
</style>

<body>
<div id="app">
    <div class="tips"></div>
    <div>
        <h3 style="text-align: center;margin-bottom:20px;">个人报名</h3>
    </div>
    <div>
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="球龄">
                <el-input v-model="form.ball_age"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="form.sex" label="男" >男</el-radio>
                <el-radio v-model="form.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="是否有保险">
                <el-radio v-model="form.baoxian" label="有" checked>有</el-radio>
                <el-radio v-model="form.baoxian" label="没有">没有</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">报名</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>

</html>
<script src='/static/login/js/jquery-3.2.1.min.js'></script>
<script>
    new Vue({
        el: '#app',
        data: {
            form: {
                name: '',
                sex: '男',
                age: '',
                ball_age: '',
                baoxian: '有',
                phone: ''
            }
        },
        methods: {
            onSubmit() {
                let data = {...this.form}
                $.post('/index/index/persional_edit', data).then(function (res) {
                    if (res.code == 200) {
                        $('.tips').text(res.message);
                        setTimeout(() => {
                            $('.tips').text('');
                        }, 3000)
                    } else {
                        $('.tips').text(res.message);
                        setTimeout(() => {
                            $('.tips').text('');
                        }, 3000)
                    }
                })
            }
        }
    })
</script>